<template>
    <s-layout :tabbarshow="false" navbar="normal" :onShareAppMessage="shareInfo" :autoBack="true">
        <!-- 头部盒子 -->
        <view class="background" :style="{ backgroundImage: `url(${baseUrl}/uploads/uniapp_image/user_v1/bg_yijierenwu@2.png)`, paddingTop:(safeAreaInsets?.top + 44) + 'px'}">
            
            <scroll-view :style="{ height: 'calc(100vh - (' + (safeAreaInsets?.top + 44) + 'px) - 212rpx)' }" scroll-y class="data_area comprehensive"  @scrolltolower='listScrolltolower' v-if="scheduleList.length"  
                show-scrollbar="true" :refresher-enabled="isOpenRefresh" :refresher-triggered="triggered" :refresher-threshold="100" refresher-background="white" @refresherpulling="onPulling" @refresherrefresh="onRefresh" @refresherrestore="onRestore" @refresherabort="onAbort" @scroll="onScroll">

                <view class="area list" v-for="(item,index) in scheduleList" :key="index">
                    <view class="item" >
                    <view class="item_name">
                        <view class="name_title nowrap">{{ item.title }}</view>
                        <view class="particulars" @tap="lookdetails(item)">查看详情 > </view>
                    </view>
                
                    <view class="item_pub">
                        <image :src="`${baseUrl}/uploads/uniapp_image/staff/Myinterview_icon_location@2.png`" mode="scaleToFill"/>
                        <view class="nowrap">{{ item.address }}</view>
                    </view>
                    <view class="item_pub">
                        <image :src="`${baseUrl}/uploads/uniapp_image/staff/Myinvite_icon_time.png`" mode="scaleToFill"/>
                        <view class="gray">{{ item.date }}</view>
                    </view>
                    <view class="item_pub">
                        <image :src="`${baseUrl}/uploads/uniapp_image/user_v1/renwuliebiao_icon_renshu@2.png`" mode="scaleToFill"/>
                        <view class="gray">
                        人数：
                        <view class="gray_left"><view class="gray_blue">{{ item.man_apply_total }}</view>/<view class="gray_black">{{ item.man_num }}</view><view class="gender">(男)</view></view>
                        <view class="gray_right"><view class="gray_orange">{{ item.woman_apply_total }}</view>/<view class="gray_black">{{ item.woman_num }}</view><view class="gender">(女)</view></view>
                        </view>
                    </view>
                    <view class="item_pub">
                        <image :src="`${baseUrl}/uploads/uniapp_image/user_v1/renwuliebiao_icon_xinzi@2.png`" mode="scaleToFill"/>
                        <view class="gray">
                        薪资：
                        <view class="gray_left"><view class="gray_blue">￥ {{ item.man_salary }}</view><view class="gender">(男)</view></view>
                        <view class="gray_right"><view class="gray_orange">￥ {{ item.woman_salary }}</view><view class="gender">(女)</view></view>
                        </view>
                    </view>
        
                    <view class="item_pub" v-if="item.can_share">
                        <image :src="`${baseUrl}/uploads/uniapp_image/user_v1/renwuliebiao_icon_xinzi@2.png`" mode="scaleToFill"/>
                        <view class="gray">
                        代理商金额：
                        <view class="gray_left"><view class="gray_blue">￥ {{ item.agent ? item.agent.agent_man_salary_max : item.agent_man_salary }}</view><view class="gender">(男)</view></view>
        
                        <view class="gray_right"><view class="gray_orange">￥ {{ item.agent ? item.agent.agent_woman_salary_max : item.agent_woman_salary }}</view><view class="gender">(女)</view></view>
                        </view>
                    </view>
        
                    <view class="Agency_amount_box" v-if="item.can_share">
                        <view class="left_box">
                        <view :class="!item.agent || (item.agent && item.agent.agent_man_salary == 0 && item.agent.agent_woman_salary == 0) ? 'Is_not_set' : 'have_set'">
                            {{ !item.agent || (item.agent && item.agent.agent_man_salary == 0 && item.agent.agent_woman_salary == 0) ? '未设置' : '已设置' }}
                        </view>
                        <view class="image">
                            <image :src="`${baseUrl}/uploads/uniapp_image/staff_v1/wodedaili_icon_jine@2.png`" mode="scaleToFill"/>
                        </view>
                        <view class="caption_text">代招工金额(男/女)：</view>
                        <view class="money">
        
                            <text v-if="!item.agent">
                            ￥{{ item.agent_man_salary }}
                            </text>
                            <text v-else>
                            <template v-if="item.agent.agent_man_salary == 0 && item.agent.agent_woman_salary == 0">
                                ￥{{ item.agent.agent_man_salary_max }}
                            </template>
                            <template v-else>
                                ￥{{ item.agent.agent_man_salary }}
                            </template>
                            </text>
                            /
                            <text v-if="!item.agent">
                            ￥{{ item.agent_woman_salary }}
                            </text>
                            <text v-else>
                            <template v-if="item.agent.agent_man_salary == 0 && item.agent.agent_woman_salary == 0">
                                ￥{{ item.agent.agent_woman_salary_max }}
                            </template>
                            <template v-else>
                                ￥{{ item.agent.agent_woman_salary }}
                            </template>
                            </text>
        
                        </view>
                        </view>
                        <view class="right_box" @tap.stop="change_agent_amount(item)" v-if="item.state <= 1">
                        <view class="image">
                            <image :src="`${baseUrl}/uploads/uniapp_image/staff_v1/wodedaili_icon_jinexiugai@2.png`" mode="scaleToFill"/>
                        </view>
                        <view class="edit_box">修改</view>
                        </view>
                    </view>
        
        
        
                    <view class="item_pub">
                        <image :src="`${baseUrl}/uploads/uniapp_image/user_v1/Myinvite_icon_time备份@2.png`" mode="scaleToFill"/>
                        <view class="blue">用工需求</view>
                    </view>
                    <view class="demand" v-if="item.show">
                        <fui-overflow-hidden  :size="24" color="#333333" type="2" gradientColor="#FFFFFF"
                        :height="height_hidden" :visible="item.visible">
                        <view class="u-content">
                        <u-parse :content="item.demand" :show-with-animation="true"></u-parse>
                        </view>
                        </fui-overflow-hidden>
                        <view class="open" @click="readMore(item)">{{ item.visibletitle }}<fui-icon :name="item.icon" color="#333"
                        size="24"></fui-icon></view> 
                    </view>
                    <view class="demand" v-else>
                        <u-parse :content="item.demand" :show-with-animation="true"></u-parse>
                    </view>
                        <view :class="(user_id == item.user_id && item.can_share) ? 'item_me' : 'item_bottom'">
                        <view class="item_bottom_left" v-if="!(user_id == item.user_id && item.can_share)">
                            <image :src="`${baseUrl}`+item.user.avatar" mode="scaleToFill"/>
                            <view class="names">
                            <view class="nowrap">{{ item.contact_name }}</view>
                            </view>
                        </view>
                        <view class="item_bottom_right" @tap="check_sign_up(item)" v-if="user_id == item.user_id">
                            <image :src="`${baseUrl}/uploads/uniapp_image/user_v1/jiedanbaoming_icon_baoming@2.png`" mode="scaleToFill"/>
                            <up-text text="查看接单"  color="#0038F7" size="26rpx" bold="true"></up-text>
                        </view>
                        <view class="item_bottom_right" @tap="onShareGoods(item)" v-if="item.can_share">
                            <image :src="`${baseUrl}/uploads/uniapp_image/user/renwuliebiao_icon_share.png`" mode="scaleToFill"/>
                            <up-text text="分享招人"  color="#FF6600" size="26rpx" bold="true"></up-text>
                        </view>
                        <view class="item_bottom_right" v-if="item.is_apply == 0" @tap="callup(item)">
                            <image v-if="item.is_apply" :src="`${baseUrl}/uploads/uniapp_image/user_v1/jiedanbaoming_icon_baoming2@2.png`" mode="scaleToFill"/>
                            <image v-else :src="`${baseUrl}/uploads/uniapp_image/user_v1/jiedanbaoming_icon_baoming@2.png`" mode="scaleToFill"/>
                            <up-text :text="item.is_apply ? '已接单' : '立即接单'" :color="item.is_apply ? '#808080' : '#0038F7'" size="26rpx" bold="true"></up-text>
                        </view>
                        <view class="item_bottom_right" v-else>
                            <image v-if="item.is_apply" :src="`${baseUrl}/uploads/uniapp_image/user_v1/jiedanbaoming_icon_baoming2@2.png`" mode="scaleToFill"/>
                            <image v-else :src="`${baseUrl}/uploads/uniapp_image/user_v1/jiedanbaoming_icon_baoming@2.png`" mode="scaleToFill"/>
                            <up-text :text=" '已接单'" :color="item.is_apply ? '#808080' : '#0038F7'" size="26rpx" bold="true"></up-text>
                        </view>
                    </view>
        
                    </view>
                </view>
                <!-- 正在加载组件 -->
                <view>
                    <s-loadmore-gather :current_page="listPage" :last_page="listlast_page" ref="loadmoreRef"></s-loadmore-gather>
                </view>
            </scroll-view>
            <u-empty v-else mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png" text="暂无内容" marginTop="30%"  marginBottom="20%"></u-empty>
            <fui-dialog :show="order_show" :content="order_content" maskClosable @click="order_click" @close="order_close"></fui-dialog>
        </view>
        <!-- 全局授权弹窗 -->
            <s-auth-modal />
        <!-- 设置金额弹出层 -->
        <s-public-models
            :show="popshows" 
            :imagesucceedSrc="dataToinformaion.imageSrc" 
            :subtitle="dataToinformaion.subtitle"  
            :hint="dataToinformaion.hint" 
            :editAgency="true"
            @cancel="manhourClose" 
            @affirm="manhourSubmit"
            :click_type="dataToinformaion.click_type" :list="edit_list">
        </s-public-models>
        </s-layout>
</template>

<script setup>
import { onLoad ,onShow } from "@dcloudio/uni-app";
import { reactive, ref,computed } from "vue";
import tools from '@/sheep/helper/tools.js';
import { baseUrl } from "@/sheep/config";
import sheep from '@/sheep';
import { showShareModal,showAuthModal } from '@/sheep/hooks/useModal';
const { safeAreaInsets } = uni.getSystemInfoSync()
sheep.$store('user').userInfo.group_id;
const user_id = sheep.$store('user').userInfo.id
const share =ref({
    title:'',
    address:'',
    date:'',
    id:''
})
//查看详情
const lookdetails = (item) => {     

        sheep.$router.go('/subpackage/user/task/task_details',{
            id: item.id,
            title:'任务',
            user_id:item.user_id
        });
    }
//展开列表
const height_hidden = ref()
const readMore = (item)=> {
        if(item.visible == false){
        item.visible = true
        item.icon = 'turningup'
        item.visibletitle = '收起列表'
    }else{
        item.visible = false
        item.icon = 'turningdown'
        item.visibletitle = '展开列表'
    }
    
            
}

// /移除HTML标签
const delTag = (str) =>{
    return str.replace(/<[^>]+>/g,"");
}
//分享招人
const onShareGoods = (item) => {
    let htmlContent =  delTag(item.demand)
    share.value.title = item.title
    share.value.address = item.address
    share.value.id = item.id
    share.value.date = item.date+' '+item.start_time+'--'+item.end_time
    share.value.employeeNeeds = htmlContent
    showShareModal();
}

// 查看接单
const check_sign_up = (item) => {
    sheep.$router.go('/subpackage/user/task/order_registration_details', {
    id: item.id,
    user_id:item.user_id
})
}

const shareInfo = computed(() => {
    return sheep.$platform.share.getShareInfo(
    {
        title:  share.value.title,
        desc:  share.value.address,
        params: {
        page: '3',
        query:share.value.id
        },
    },
    {
        type: 'clock_in', // 商品海报
        title: share.value.title,
        desc:  share.value.address,
        signUpTime: share.value.date,
        employeeNeeds: share.value.employeeNeeds,
    },
    );
});

// 对话框逻辑
const order_show = ref(false)
const order_content = ref('是否确认接单？')
    // 确认
const order_click = (e) => {
    if(e.text == '确定') {
    uni.$u.throttle(() => {
        // #ifdef MP
        sheep.$platform.useProvider('wechat').subscribeMessage('task_apply_notice');
        // #endif
        let params = {
        schedule_id:schedule_id.value,
        share_id:share_id.value
        }
        sheep.$api.project.postScheduleUserAdd(params).then(res => {
        sheep.$helper.toast(res.msg);
        if(res.code == 1) {
            listpagenumber.value = 1;
            scheduleList.value = []
            getScheduleTaskList()
        }
        })
    }, 1000);
    }
    order_close()
}
// 点击遮罩
const order_close = () => {
    order_show.value = false
}
// 立即接单
const schedule_id = ref()
const share_id = ref()
const callup =(item)=>{
    order_show.value = true
    schedule_id.value = item.id
    share_id.value = item.user_id
}


onLoad((options) => {
    listpagenumber.value = 1;
    scheduleList.value = []
    getScheduleTaskList()
})
// 数据请求
// 明天日期
const now = new Date();
const tomorrow = new Date(now.getFullYear(), now.getMonth(), now.getDate() + 1);
const  tomorrowDate = `${tomorrow.getFullYear()}-${(tomorrow.getMonth() + 1).toString().padStart(2, '0')}-${tomorrow.getDate().toString().padStart(2, '0')}`
const listPage = ref()
const listlast_page = ref()
const listpagenumber = ref(1)
const scheduleList = ref([])
const getScheduleTaskList = async () => {
    let params = {
    filter: JSON.stringify({
        date:tomorrowDate+','+ new Date().toISOString().slice(0, 10),
        state:"0,1"
    }),
    op: JSON.stringify({
        date: 'in',
        state: 'in',
    }),
    type:'user_apply',
    page:listpagenumber.value
    }
    const res = await sheep.$api.project.getScheduleTaskList(params);
    if(res !== undefined) {
    scheduleList.value = [...scheduleList.value, ...res.data.rows];
    scheduleList.value.forEach(item=>{
        const count_length = (item.demand.match(/<\/p>/g) || []).length;
        if(count_length > 3 || item.demand.length > 82){
          item.visible = false,
          item.show = true
          item.visibletitle ='展开列表'
          item.icon = 'turningdown'
          height_hidden.value = '110rpx'
        }else{
          item.show = false
        }
    })
    listPage.value = res.data.current_page
    listlast_page.value = res.data.last_page
    }
};
//滚动触底
const loadmoreRef = ref()
const listScrolltolower = () => {
    loadmoreRef.value.PopupScrolltolower()
    if (listPage.value < listlast_page.value) {
    listpagenumber.value += 1;
    } else {
    return;
    }
    getScheduleTaskList();
};

// 页面下拉刷新
const freshing = ref(false)
const triggered = ref(false)
const isOpenRefresh = ref(true)  // 是否开启下拉
// 自定义下拉刷新控件被下拉
const onPulling = (e) => {
    if (e.detail.deltaY < 0) return  // 防止上滑页面也触发下拉
    triggered.value = true;
}
// 自定义下拉刷新被触发
const onRefresh = () => {
    if (freshing.value) return;
    freshing.value = true;
    setTimeout(() => {
    listpagenumber.value = 1;
    scheduleList.value = []
    triggered.value = false;
    freshing.value = false;
    getScheduleTaskList();
    }, 500);
}
// 自定义下拉刷新被复位
const onRestore = () => {
    triggered.value = 'restore'; // 需要重置
}
// 自定义下拉刷新被中止
    const onAbort = () => {
}




// 修改代理商金额
const edit_ids=ref()
const edit_list = ref()
const post_data = ref()
const change_agent_amount = (e) => {
    post_data.value = e
    if(e.agent) {
    edit_list.value = e.agent
    } else {
    edit_list.value = e
    }
    edit_ids.value = e.id
    popshows.value = true
    dataToinformaion.value.click_type ='agency'
    dataToinformaion.value.subtitle = '修改代招工金额'
    dataToinformaion.value.hint =  '修改金额后会覆盖已修改的金额'
    dataToinformaion.value.imageSrc = '/uploads/uniapp_image/staff/piliangshezhi_img_bg2.png'
}
// 修改代理商金额
    //工时弹窗
    const popshows = ref(false)

    const dataToinformaion = ref({
        subtitle: '',
        imageSrc: '',
        hint:'',
        click_type:''
    })
    // 取消按钮
    const manhourClose = (e) =>{
        popshows.value = e
    }

    // 提交批量更改按钮 此处参数 e 为输入值 参数 i 为判断是什么值 如果为 salary 为批量设置金额 如果为 man_hour 则是批量设置工时
    const manhourSubmit = async(e,i,a)=> {

    if(post_data.value.agent) {
        if(e > Number(post_data.value.agent.agent_man_salary_max) || a > Number(post_data.value.agent.agent_woman_salary_max)) {
        sheep.$helper.toast('修改不能大于限制金额');
        return
        }
    } else {
        if(e > Number(post_data.value.agent_man_salary) || a > Number(post_data.value.agent_woman_salary)) {
        sheep.$helper.toast('修改不能大于限制金额');
        return
        }
    }

        let params ={
            share_id:user_id,
            schedule_id: edit_ids.value,
            agent_man_salary:e,
            agent_woman_salary:a
        }
        const res = await sheep.$api.agency.editAgentByScheduleid(params);
        if(res.code == 1){
            sheep.$helper.toast(res.msg);
            setTimeout(()=>{
            listpagenumber.value = 1;
            scheduleList.value = []
            getScheduleTaskList()
            popshows.value = false
            },500)
        } else {
            sheep.$helper.toast(res.msg);
        }
    }



</script>

<style scoped lang="scss">

page {
    width: 100%;
    height: 100%;
}

.area {
    width: calc(100% - 40rpx);
    margin: 0 20rpx;
}

.background {
    width: 100%;
    background-size: 100%;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

//内容列表
.list{
    display: flex;
    align-items: center;
    flex-direction: column;
    margin-bottom: 26rpx;
    background: $uni-bg-color;
    border-radius: 16rpx;
    box-shadow: 0 2rpx 8rpx 0 rgba(0, 0, 0, 0.05);
    .item{
    padding: 40rpx 30rpx 0rpx 30rpx;
    width: 650rpx;
    .item_name{
        display: flex;
        align-items: center;
        margin-bottom: 25rpx;
        justify-content: space-between;
        .item_name_blue{
        color: $uni-color-primary;
        font-weight: 400;
        font-size:$uni-font-size-26;
        }
        .name_title{
        width: 90%;
        color: $uni-text-color;
        font-weight: 500;
        font-size: $uni-font-size-big;
        } 
    }
    .item_pub{
        display: flex;
        align-items: center;
        height: 50rpx;
        .nowrap{
        width: 90%;
        color: #666666;
        font-weight: 400;
        font-size:$uni-font-size-26;
        }
        .gray{
        width: 90%;
        color: #666666;
        font-weight: 400;
        font-size:$uni-font-size-26;
        display: flex;
        }
        .blue{
        font-family: PingFangSC;
        color: #0038F7;
        font-weight: 600;
        font-size: 26rpx;
        font-style: normal;
        text-decoration: none;
        text-align: left;
        }
        image{
        width: 28rpx;
        height: 28rpx;
        margin-right: 10rpx;
        }
    }
    .demand {
        margin-top: 20rpx;
        width: calc(100% - 40rpx);
        border-radius: 8px;
        background-color: #F8F9FF;
        padding: 20rpx;
        font-size: 24rpx;
        color: #333;
    }
    .item_bottom{
        margin-top: 20rpx;
        width: 100%;
        border-top: 1rpx solid #F4F4F4;
        display: flex;
        justify-content: space-between;
        .item_bottom_left{
        padding: 26rpx 0;
        width: 40%;
        display: flex;
        align-items: center;
        image{
            border-radius: 33rpx;
            width: 64rpx;
            height: 64rpx;
            margin-right: 16rpx;
        }
        .names {
            .nowrap{
            width: 100%;
            color: $uni-text-color;
            font-weight: 500;
            font-size:$uni-font-size-26;
            margin-bottom: 10rpx;
            }
            .text{
            color: #999999;
            font-weight: 400;
            font-size: 20rpx;
            }
        }
        }
        .item_bottom_right{
        display: flex;
        align-items: center;
        margin-right: 30rpx;
        &:first-child{
            image{
            width: 26rpx;
            height: 24rpx;
            display: flex;
            align-items: center;
            }
        }
        image{
            width: 28rpx;
            height: 28rpx;
            margin-right: 10rpx;
            display: flex;
            align-items: center;
        }
        }
    }
    // 底部
    .item_me {
        margin-top: 20rpx;
        width: 100%;
        border-top: 1rpx solid #F4F4F4;
        display: flex;
        justify-content: space-around;
        .item_bottom_left{
        padding: 36rpx 0 34rpx 0;
        width: 40%;
        display: flex;
        align-items: center;
        image{
            border-radius: 33rpx;
            width: 64rpx;
            height: 64rpx;
            margin-right: 16rpx;
        }
        .names {
            .nowrap{
            width: 100%;
            color: $uni-text-color;
            font-weight: 500;
            font-size:$uni-font-size-26;
            margin-bottom: 10rpx;
            }
            .text{
            color: #999999;
            font-weight: 400;
            font-size: 20rpx;
            }
        }
        }
        .item_bottom_right {
        display: flex;
        align-items: center;
        padding: 36rpx 0 34rpx 0;
        &:first-child{
            image{
            width: 26rpx;
            height: 24rpx;
            display: flex;
            align-items: center;
            }
        }
        image{
            width: 28rpx;
            height: 28rpx;
            margin-right: 10rpx;
            display: flex;
            align-items: center;
        }
        }
    }
    
    }
}

.nowrap{
    white-space: nowrap;      /* 保持文本在一行内 */
    overflow: hidden;         /* 超出容器部分隐藏 */
    text-overflow: ellipsis;
}

// 滚动容器
.comprehensive {
    margin-top: 212rpx;
}

.selected {
    background-color: #ffffff;
    color: #000000;
    font-family: PingFangSC;
    font-weight: 550;
    font-size: 32rpx;
    font-style: normal;
    text-decoration: none;
    text-align: center;
}
.no_selected {
    background-color: #ECF6FF;
    color: #666666;
    font-family: PingFangSC;
    font-weight: 550;
    font-size: 32rpx;
    font-style: normal;
    text-decoration: none;
    text-align: center;
}

// tabs
.tabs {
    width: 100%;
    height: 88rpx;
    margin-top: 212rpx;
    display: flex;
    align-items: center;
    background-color: #ffffff;
    border-radius: 44rpx 44rpx 0 0;
    .item_tab_bac {
    display: flex;
    align-items: center;
    width: 50%;
    height: 100%;
    line-height: 88rpx;
    }
    .item_tab_bac:nth-child(1) {
    border-radius: 44rpx 0 0 0;
    }
    .item_tab_bac:nth-child(2) {
    border-radius: 0 44rpx 0 0;
    }
    .item_tab {
    width: 100%;
    height: 100%;
    line-height: 88rpx;
    position: relative;
    }

    .left {
    border-radius: 44rpx 44rpx 0rpx 0rpx;
    }
    .right {
    border-radius: 0rpx 44rpx 0rpx 44rpx;
    }
    
    .base {
    position: absolute;
    // top: 50%;
    bottom: 14rpx;
    right: 45%;
    left: 45%;
    width: 40rpx;
    height: 8rpx;
    border-radius: 2px;
    background: linear-gradient(90deg, rgba(0, 56, 247, 1) 0%, rgba(77, 139, 255, 1) 100%);
    }
}

.placeholder {
    background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(244, 246, 250, 1) 100%);
    height: 22rpx;
}

// 新增： 人数 薪资
.gray_left {
    margin-right: 50rpx;
    display: flex;
    align-items: center;
}

// .gray_Agents_amount {

// }

.gray_right {
    display: flex;
    align-items: center;
}

.gray_blue {
    margin-right: 10rpx;
    color: #0038f7;
    font-weight: 550;
}
.gray_orange {
    margin-right: 10rpx;
    color: #ff6600;
    font-weight: 550;
}
.gray_black {
    margin-left: 10rpx;
    margin-right: 5rpx;
    font-weight: 550;
    color: #333333;
}
.gender {
    font-size: 24rpx;
    margin-left: 5rpx;
}


// 代理金额盒子
.Agency_amount_box {
font-family: PingFangSC;
display: flex;
text-align: center;
align-items: center;
justify-content: space-between;
border-radius: 4px;
    background-color: #F9FBFF;
height: 52rpx;
.left_box {
    display: flex;
    align-items: center;
    .caption_text {
    color: #333333;
    font-size: 22rpx;
    font-weight: 500;
    }
    .money  {
    color: #FF0000;
    font-size: 22rpx;
    font-weight: 600;
    }
    .image {
    margin-left: 12rpx;
    width: 24rpx;
    height: 24rpx;
    display: flex;
    align-items: center;
    margin-right: 12rpx;
    image {
        width: 100%;
        height: 100%;
    }
    }
}
.right_box {
    display: flex;
    align-items: center;
    margin-right: 10rpx;
    .edit_box {
    font-family: PingFangSC;
    color: #0038F7;
    font-weight: 500;
    font-size: 22rpx;
    font-style: normal;
    text-decoration: none;
    text-align: left;
    }
    .image {
    width: 24rpx;
    height: 24rpx;
    display: flex;
    align-items: center;
    margin-right: 10rpx;
    image {
        width: 100%;
        height: 100%;
    }
    }
}
}

// 已设置
.have_set {
font-family: PingFangSC;
color: #0038F7;
font-weight: 400;
font-size: 20rpx;
font-style: normal;
text-decoration: none;
text-align: center;
border-radius: 4px;
background-color: #FFFFFF;
border: 1px solid #0038F7;
width: 70rpx;
height: 28rpx;
}

// 未设置
.Is_not_set {
font-family: PingFangSC;
color: #FFFFFF;
font-weight: 400;
font-size: 20rpx;
font-style: normal;
text-decoration: none;
text-align: center;
border-radius: 4px;
background-color: #FF5100;
width: 70rpx;
height: 28rpx;
}
.open {
    height: 40rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333333;
    font-weight: 400;
    font-size: 24rpx;
    }
    .particulars {
        width: 120rpx;
        font-family: PingFangSC;
        color: #0038F7;
        font-weight: 400;
        font-size: 22rpx;
        font-style: normal;
        text-decoration: none;
        text-align: center;
    }
</style>